<template>
<div>
    <el-dialog :visible.sync="pwdController" @close="closeDialog" width="350px">
        <h3>修改密码</h3>
        <el-form>
            <el-form-item label="请输入旧密码">
                <el-input type="password" v-model="oldForm.oldPwd" style="width:160px" @blur="chkOld"></el-input>
                <template>
                    <el-alert title="旧密码输入不正确" type="warning" v-if="!flag1" :closable="false">
                    </el-alert>
                </template>
            </el-form-item>
            <el-form-item label="请输入新密码">
                <el-input type="password" v-model="pwd1" style="width:160px" @blur="chk1"></el-input>
                <template>
                    <el-alert title="新密码不能为空" type="warning" v-if="!flag2" :closable="false">
                    </el-alert>
                </template>
            </el-form-item>
            <el-form-item label="请确认新密码">
                <el-input type="password" v-model="pwd2" style="width:160px" @blur="chk2"></el-input>
                <template>
                    <el-alert :title="tip" type="warning" v-if="!flag3" :closable="false">
                    </el-alert>
                </template>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submit">确认</el-button>
                <el-button type="text" @click="cancle">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
export default {
    name: 'ChanggePwd',
    props: {
        changePwdCtrl: Boolean
    },
    data() {
        return {
            pwdController: false,
            oldForm: {
                userid: localStorage.getItem('userid'),
                oldPwd: ''
            },
            newForm: {
                userid: localStorage.getItem("userid"),
                newPwd: ''
            },
            pwd1: '',
            pwd2: '',
            tip: '',
            flag1: true,
            flag2: true,
            flag3: true
        }
    },
    methods: {
        closeDialog() {
            this.flag1 = true
            this.flag2 = true
            this.flag3 = true
            this.oldForm.oldPwd = ''
            this.pwd1 = ''
            this.pwd2 = ''
            this.pwdController = false
        },
        chkOld() {
            this.$http.post('/login', this.oldForm).then(res => {
                if (res.data.code == '200') {
                    this.flag1 = true;
                } else {
                    this.flag1 = false;
                }
            })
        },
        chk1() {
            if (this.pwd1 == '') {
                this.flag2 = false;
            } else {
                this.flag2 = true;
            }
        },
        chk2() {
            if (this.pwd2 == '') {
                this.tip = '确认密码不能为空'
                this.flag3 = false;
            } else if (this.pwd1 != this.pwd2) {
                this.tip = '两次输入不一致'
                this.flag3 = false;
            } else {
                this.newForm.newPwd = this.pwd1
                this.flag3 = true
            }
        },
        submit() {
            if(this.flag1 && this.flag2 && this.flag3) {
                this.$http.post('/changePassword',this.newForm).then(res=>{
                    if(res.data == 'success') {
                        this.$message({
                            message:'密码修改成功',
                            type:'success'
                        })
                        this.pwdController = false
                        this.$emit('success')
                    } else {
                        this.$message.error('服务器错误')
                    }
                })
            } else {
                this.$message.error('请检查输入')
            }
        },
        cancle() {
            this.closeDialog()
        },

    },
    watch: {
        changePwdCtrl() {
            this.pwdController = true
        }
    }
}
</script>

<style>

</style>
